<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 相对路径:从当前html文件出发去找资源
   1)图片与html文件在同一级目录:直接写图片全名!
   2)图片在html文件的上一级目录:先../回到上一级,再写图片全名!
   3)图片在html文件的下一级目录:先写目录名,再写图片全名!
   -->
<img src="1.jpg" alt="" width="300px" height="300px">
<img src="img/2.jpg" alt="" width="300px" height="300px">
<img src="../3.jpg" alt="" width="300px" height="300px">
<!-- alt属性是当图片无法正常加载时展示的替换文字 -->
<img src="abc" alt="照片被你吃了">
<!-- width设置图片宽度 height设置图片高度
   图片失真:图片的宽高比例不对 压缩或拉伸了
   图片本身是有大小和宽高比的,可以只设置宽高其中的一个属性,另外一个会跟着改-->
<img src="img/22su.jpg" width="100px" height="100px">
<img src="img/22su.jpg" width="100px">
<img src="img/22su.jpg" height="100px" title="这是一个美好的夏天">
<!-- 绝对路径:从协议/盘符根路径出发去找资源 -->
<img src="https://cdn.tmooc.cn/bsfile//courseImg///f044221ee737404e91584a4d083764bd.png" alt="" width="300px" height="300px">
<img src="https://img12.360buyimg.com/n1/s720x720_jfs/t1/74800/10/18352/443812/61d00829Eeba4f9f4/0f9a1523d6a879ab.jpg" alt="" width="300px" height="300px">
<img src="https://m.360buyimg.com/mobilecms/s500x500_jfs/t1/320595/12/7517/246610/6845915eF8050948a/d19f68ebcef0cd5c.jpg" alt="" width="300px" height="300px">
</body>
</html>